<template>
  <h1>我是父组件</h1>

  <ul>
    <li v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  
  <!-- 子组件 -->
  <child-component @add="handleAdd"></child-component>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from "./ChildComponent.vue";

const list = ref(['JavaScript', 'HTML', 'CSS'])

// add 触发后的事件处理函数
//在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作
const handleAdd = msg => {
  list.value.push(msg)
}
</script>

<style lang="less">
</style>
